<template>

	<div class="community">
		<div class="Serch">
			<div>
				<span>关注</span>
				<span>推荐</span>
				<img src="../../img/md-photo_camera@1x.png" alt="" @click="openCamera">
			</div>

			<input type="serch" placeholder="搜索" @focus.stop="SerchSome">
		</div>
		<div class="content">
			<ul class="clearfix" >
				<li @click="xiangqing">
					<div><img src="../../img/community01.png" alt=""></div>
					<p>复古型咖啡厅 环境惬意 ，非常推荐大家去试试</p>
					<span>
						<img src="../../img/community011.png" alt="">
						<div>frgrsgrdtgrgrdt</div>
					</span>
				</li>
				<li>
					<div><img src="../../img/community02.png" alt=""></div>
					<p>香浓可可咖啡 诱人美味</p>
					<span><img src="../../img/comunity022.png" alt=""></span>
				</li>

			</ul>
		</div>




		<navbar></navbar>
	</div>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	export default {
		components: {
			navbar
		},
		methods: {
			xiangqing(){
				if(localStorage.getItem('token')){
					this.$router.push('/two/xiangqing')
				}else{
					this.$router.push('/login')
				}
			},
			SerchSome() {
				console.log(1);
				this.$router.push('/two/serch')
			},
			openCamera(){
				this.$router.push('/two/camera')
				}
		}

	}
</script>

<style lang="less" scoped>
	

	.content {
		width: 100%;
		background-color: #f0f0f0;

		padding-top: 20px;

		ul {
			width: 100%;

			// display: flex;
			// flex-wrap:wrap;
			li {
				width: 48%;
				background-color: white;
				border-radius: 10%;
				float: left;

				span {
					
				
					display: block;
					text-align: left;
					
					div{
						display: inline-block;
						width:50px;
						border: 1px solid red;
					}
				}

				p {
					margin: 0;
					font-weight: 400;
				}

				div {
					img {
						width: 100%;
					}
				}

			}
		}


	}

	.Serch {
		width: 100%;
		height: 78px;
		line-height: 20px;
		text-align: center;

		div {
			display: flex;
			justify-content: center;
			img{
				width: 30px;
				height: 30px;
				margin: 10px;
				
			}
			span {
				display: inline-block;
				width: 50%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 20px;
				font-weight: 600;
				font-family: PingFangSC-bold;
			}
		}

		input[type="serch"] {
			width: 85%;
			height: 24px;
			line-height: 20px;
			border-radius: 21px;
			color: rgba(16, 16, 16, 50);
			font-size: 14px;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(187, 187, 187, 100);
			background: url(../../img/mb-search%20Copy@1x.png) no-repeat 42% center;
			background-color: rgba(222, 240, 253, 46);
		}


	}
</style>
